<template>
	<!-- 注册界面 -->
	<view class="content">
		<!-- 表单区域 -->
		<form name="registeruser" @submit="submitform">
			<view class="registerform">
				<view class="registerform_list">
					<view class="registerform_list_left">
						<view class="registerform_list_left_img">
							<image mode="widthFix" src="http://localhost:3000/img/wo1.png"></image>
						</view>
						<input name="user" placeholder="请输入用户名" />
					</view>
				</view>
				<view class="registerform_list">
					<view class="registerform_list_left">
						<view class="registerform_list_left_img">
							<image mode="widthFix" src="http://localhost:3000/img/zc1.png"></image>
						</view>
						<input name="phone" type="number" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="registerform_list">
					<view class="registerform_list_left">
						<view class="registerform_list_left_img">
							<image mode="widthFix" src="http://localhost:3000/img/zc2.png"></image>
						</view>
						<input name="passnew" password placeholder="请输入密码" />
					</view>
				</view>
				<view class="registerform_list">
					<view class="registerform_list_left">
						<view class="registerform_list_left_img">
							<image mode="widthFix" src="http://localhost:3000/img/zc3.png"></image>
						</view>
						<input name="passold" password placeholder="请再次输入密码" />
					</view>
				</view>
				<view class="registerform_list">
					<view class="registerform_list_left">
						<view class="registerform_list_left_img">
							<image mode="widthFix" src="http://localhost:3000/img/zc4.png"></image>
						</view>
						<text class="registerform_list_left_text">用户类型</text>
					</view>
					<view class="registerform_list_right" @click="showactionsheet">
						<text class="registerform_list_right_name">{{type.type}}</text>
						<view class="registerform_list_right_img">
							<image mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 注册按钮 -->
			<button form-type="submit" style="margin:50rpx 20rpx ;border-radius: 10rpx;font-size: 28rpx;" type="warn">注册</button>
			<!-- 已有账号，去登录 -->
			<view class="login">
				<text @click="login">已有账号？去登录</text>
			</view>
			<!-- 协议 -->
			<view class="register_xieyi">
				<radio-group name="check">
					<radio :value="checked" color="red" @click="onchange" :checked="checked"></radio>
				</radio-group>
				<text class="register_xieyi_text">我已同意并接受 </text>
				<navigator>《首选相关协议》</navigator>
			</view>
		</form>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 协议的勾选状态
				checked:false,
				// 用户类型
				type:{
					id:0,
					type:'散户'
				},
				// 注册内容
				users:{}
			}
		},
		methods:{
			// 协议的勾选状态
			onchange(){
				this.checked=!this.checked
				console.log(this.checked)
				
			},
			// 点击用户类型,弹出选择框
			showactionsheet(){
				uni.showActionSheet({
					itemList:['散户',"批发商"],
					success: (res) => {
						if(res.tapIndex==0){
							this.type={id:0,type:"散户"}
						}else if(res.tapIndex==1){
							this.type={id:1,type:"批发商"}
						}
					}
				})
			},
			// 提交表单
			submitform(val){
				if(val.detail.value.check){
					this.users=val.detail.value
					if(this.users.user.trim()=="" || this.users.user.length<2){
						// 消息提示
						uni.showToast({
							title:"用户名长度最少4个字节",
							icon:"none"
						})
					}else if(this.users.phone.trim()=="" || this.users.phone.length<8){
						// 消息提示
						uni.showToast({
							title:"手机号不正确",
							icon:"none"
						})
					}else if(this.users.passnew.trim()=="" || this.users.passnew.length<6){
						// 消息提示
						uni.showToast({
							title:"密码最少6位数",
							icon:"none"
						})
					}else if(this.users.passnew.trim()!==this.users.passold.trim()){
						// 消息提示
						uni.showToast({
							title:"两次输入的密码不同",
							icon:"none"
						})
					}else{
						// 判断是否存在
						uni.request({
							url:"http://localhost:3001/goods_user",
							data:{name:this.users.user},
							method:"POST",
							success: (res) => {
								console.log(res)
								if(res.data.data!=""){
									// 消息提示
									uni.showToast({
										title:"用户名已存在，请更换",
										icon:"none"
									})
								}else{
									this.users.type=this.type.type
									console.log(this.users)
									uni.request({
										url:"http://localhost:3001/goods_zuce",
										data:{
											username:this.users.user,
											password:this.users.passnew,
											user_tel:this.users.phone,
											type:this.users.type
										},
										method:"POST",
										success(){
											// 消息提示
											uni.showToast({
												title:"注册成功，快去登录吧",
												icon:"none"
											})
										}
									})
								}
							}
						})
					}
				}else{
					// 消息提示
					uni.showToast({
						title:"请勾选阅读协议",
						icon:"none"
					})
				}
				
			},
			// 已有账号,去登录
			login(){
				uni.reLaunch({
					url:"./login"
				})
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 100%;
		background-color: #F3F3F3;
		box-sizing: border-box;
	}
	image{
		width: 100%;
		display: block;
	}
	.content{
		
	}
	.registerform{
		margin: 36rpx 20rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e2e2e2;
		overflow: hidden;
	}
	.registerform_list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:36rpx 30rpx ;
		background-color: #FFFFFF;
	}
	.registerform_list:nth-child(n+2){
		border-top: 2rpx solid #e2e2e2;
	}
	.registerform_list_left{
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #000000;
		
	}
	.registerform_list_left_img{
		width: 34rpx;
		margin-right: 20rpx;
	}
	input{
		width:70% ;
	}
	.registerform_list_right{
		display: flex;
		align-items: center;
		font-size: 22rpx;
		font-weight: 500;
	}
	.registerform_list_right_img{
		width: 26rpx;
	}
	.registerform_list_left_text,.registerform_list_right_name{
		color: #666;
	}
	.login{
		text-align: center;
		font-size: 22rpx;
		color: #999999;
		margin: 30rpx 0;
	}
	.register_xieyi{
		display: flex;
		justify-content: center;
		font-size: 20rpx;
		color: red;
		align-items: center;
	}
	.register_xieyi_text{
		font-size: 18rpx;
		color: #999;
	}
	
</style>
